<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" session="false"%>
<%
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<!-- ExtJS 样式 -->
<link rel="stylesheet" type="text/css"
	href="${path}/script/extjs-3.2.1/resources/css/ext-all.css" />
<!-- 先引入底层驱动，一般用ext自己的，如果要使用jquery的，还要先引入jquery库 -->
<script type="text/javascript"
	src="${path}/script/extjs-3.2.1/adapter/ext/ext-base.js"></script>
<!-- ExtJs all -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/ext-all.js"></script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<script type="text/javascript">
function createSimpleTree(){
	// 树节点 Ext.tree.TreeNode
	var root = new Ext.tree.TreeNode({text: "树根"});
	root.appendChild(new Ext.tree.TreeNode({text: "子节点"}));
	// 树面板，一棵树一个根节点
	// enableDD 对应 dargdrop 事件，可以写一个监听函数发Ajax请求到后台保存
	var panel = new Ext.tree.TreePanel({
		title: "树",
		height: 300,
		width: 300,
		enableDD: true,
		root: root
	});
	panel.render("d1");
}
function createAsyncTree(){
	// 加载器Ext.tree.TreeLoader
	var loader = new Ext.tree.TreeLoader({
		url: "${path}/data/treedata.do",
		// 预先加载所有子节点
		// preloadChildren: true,
		baseParams: {parentId: null}
	});
	loader.on("beforeload", function(loader, node){
		loader.baseParams.parentId = node.id;
	});
	// 树面板，一棵树一个根节点
	var root =  new Ext.tree.AsyncTreeNode({id:1, text: "树根"});
	var panel = new Ext.tree.TreePanel({
		title: "树",
		height: 300,
		width: 300,
		loader: loader,
		root: root
	});
	panel.render("d2");
}
function createLocalAsyncTree(){
	var panel = new Ext.tree.TreePanel({
		split: true,
		// 构造空的
	    loader: new Ext.tree.TreeLoader(),
	    root: new Ext.tree.AsyncTreeNode({
	        expanded: true,
	        children: [{
	            text: 'Menu Option 1',
	            leaf: true
	        }, {
	            text: 'Menu Option 2',
	            leaf: true
	        }, {
	            text: 'Menu Option 3',
	            leaf: true
	        }]
	    }),
	    // rootVisible: false,
	    listeners: {
	        click: function(node) {
	            Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + node.attributes.text + '"');
	        }
	    }
	});
	panel.render("d3");
}
function createMenuTree(){
	// 树节点 Ext.tree.TreeNode
	var root = new Ext.tree.TreeNode({text: "树根"});
	root.appendChild(new Ext.tree.TreeNode({text: "子节点"}));
	// 树面板，一棵树一个根节点
	// enableDD 对应 dargdrop 事件，可以写一个监听函数发Ajax请求到后台保存
	var panel = new Ext.tree.TreePanel({
		title: "树",
		height: 300,
		width: 300,
		enableDD: true,
		root: root,
	});
	// 右键菜单，可以放任意空间，日期、调色板等等
	var menu = new Ext.menu.Menu({
		items: [{text: "新建"}, {text: "删除", handler: function(){
			// 获得当前选中的节点
			Ext.Msg.prompt("提示", "请输入");
		}}]
	});
	panel.on("contextmenu", function(node, e){
		menu.showAt(e.getXY());
	});
	panel.render("d4");
}
Ext.onReady(function(){
	createSimpleTree();
	createAsyncTree();
	createLocalAsyncTree();
	createMenuTree();
});
</script>
</body>
</html>
